<template>
  <div>
    <h1>页面2 Promise异步控制</h1>
    <br />
  </div>
</template>

<script>
import http from "../../plugins/request";

export default {
  name: "Page2",
  props: {
    msg: String
  },
  data() {
    return {
      isReqFinish: false
    };
  },

  mounted() {
    // 例子1 耗时操作
    // this.process1();

    // 例子2 耗时操作返回对象
    // this.process2().then(r => {
    //   console.log(r);
    // });

    // 例子3 控制耗时操作的顺序
    // 精髓在于：Promise能够简化层层回调的写法(类似链式调用/防止金字塔结构出现)
    this.process2()
      .then(r => {
        console.log(r);
      })
      .then(r => {
        return this.process3();
      })
      .then(r => {
        this.process3(true).catch(error => {
          console.log(error);
        });
      });

    // 例子4 控制结束时机完毕后执行
    // Promise.all([this.process2(), this.process3()])
    //   .then(r => {
    //     console.log("process2和process3都结束了");
    //   })
    //   .catch(error => {
    //     console.log("process2和process3有一个报错了");
    //   });

    // race 谁先结束就走then回调
  },
  methods: {
    // 耗时操作1
    process1() {
      console.log("开始耗时操作1");
      let p1 = new Promise(function(resolve, reject) {
        //做一些异步操作
        setTimeout(function() {
          console.log("执行完成Promise1");
        }, 2000);
      });
      return p1;
    },
    // 耗时操作通过resolve返回结果
    process2() {
      console.log("开始耗时操作2");
      let p2 = new Promise(function(resolve, reject) {
        //做一些异步操作
        setTimeout(function() {
          console.log("Promise2执行完成");
          resolve("要返回的数据可以任何数据例如接口返回数据");
        }, 2000);
      });
      return p2;
    },
    // 耗时操作通过reject报错可用catch捕获
    process3(isError = false) {
      console.log("开始耗时操作3");
      //reject报错
      let p3 = new Promise(function(resolve, reject) {
        //做一些异步操作
        setTimeout(function() {
          console.log("Promise3执行完成");
          if (!isError) {
            resolve("Promise3的内容");
          } else {
            reject("Promise3的报错");
          }
        }, 2000);
      });
      return p3;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
</style>

